<template>
<div>
  <div style="margin-top: 10px">
    <el-button type="primary" style="margin-bottom: 20px;background: #2cc8b7" @click="addmedicine" icon="el-icon-plus" >添加药物</el-button>
    <el-input maxlength="8" show-word-limit v-model="input" placeholder="请输入药物名称" style="width: 200px;margin-left: 580px"></el-input>
    <el-input maxlength="5" show-word-limit v-model="input1" placeholder="请输入药物编号" style="width: 200px;margin-left: 0px"></el-input>
    <el-button icon="el-icon-search" circle style="margin-left: 5px" @click="find"></el-button>
    <el-button icon="el-icon-refresh-right" circle style="margin-left: 5px" @click="shuaxin"></el-button>

  </div>
  <div>
  <el-table class="el"
    :data="tableData"
    border
    style="width: 1200px">
    <el-table-column
      label="药物编号"
      width="200"
      align="center">
      <template slot-scope="scope">
        <i class="el-icon-star-off"></i>
        <span style="margin-left: 10px">{{ scope.row.mid }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="药物名称"
      width="200"
      align="center">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.mname }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="药物价格"
      width="200"
      align="center">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.mprice }}元</span>
      </template>
    </el-table-column>


    <el-table-column
      label="供应商名称"
      width="200"
      align="center">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.pname }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="供应商编号"
      width="200"
      align="center">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>供应商名称:{{ scope.row.pname }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.pid }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>


    <el-table-column label="操作"
                     align="center">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

    <el-pagination
      :current-page="currentPage"
      :total="total"
      :page-sizes="[5, 10, 15]"
      :page-size="pageSize"
      background
      layout="prev, pager, next, sizes, total, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <el-dialog title="药物信息" :visible.sync="dialogFormVisible" style="width: 1200px">
    <el-form :model="form">
      <el-form-item label="药物名称" :label-width="formLabelWidth">
        <el-input v-model="form.mname" autocomplete="off" style="width: 300px"  placeholder="请输入药物名称"></el-input>
      </el-form-item>
      <el-form-item label="药物价格" :label-width="formLabelWidth">
        <el-input v-model="form.mprice" autocomplete="off" style="width: 300px" placeholder="请输入药物价格"></el-input>
      </el-form-item>
      <el-form-item label="供应商编号" :label-width="formLabelWidth">
        <el-input v-model="form.pid" autocomplete="off" style="width: 300px" placeholder="请输入供应商编号"></el-input>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="ok">确 定</el-button>
    </div>
  </el-dialog>

  <el-dialog title="药物信息" :visible.sync="dialogFormVisible1" style="width: 1200px">
    <el-form :model="form1">
      <el-form-item label="药物名称" :label-width="formLabelWidth">
        <el-input v-model="form1.mname" autocomplete="off" style="width: 300px"  placeholder="请输入药物名称"></el-input>
      </el-form-item>
      <el-form-item label="药物价格" :label-width="formLabelWidth">
        <el-input v-model="form1.mprice" autocomplete="off" style="width: 300px" placeholder="请输入药物价格"></el-input>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible1 = false">取 消</el-button>
      <el-button type="primary" @click="ok1">确 定</el-button>
    </div>
  </el-dialog>

</div>
</template>

<script>
  import {medicineselect,provider,medicineinsert,medicinedelete,medicineupadate} from "../../api";

  export default {
    inject:['reload'],
    data() {
      return {
        dataList:[],
        currentPage: 1, //当前页
        pageSize: 5, //每页行数
        total: 0,
        tableData: [
        ],
        formLabelWidth: '100px',
        dialogTableVisible: false,
        dialogFormVisible1:false,
        dialogFormVisible: false,
        input:'',
        input1:'',
        x:'',
        form: {
          mname: '',
          mprice: '',
          pid: '',
        },
        form1:{
          mname:'',
          mprice:''
        }
      }
    },

    methods: {
      handleEdit(index, row) {
       this.dialogFormVisible1=true
        this.x=this.tableData[index].mid
        this.form1.mname=this.tableData[index].mname
        this.form1.mprice=this.tableData[index].mprice
      },
      ok1()
      {
        if(this.form1.mprice!=''&&this.form1.mname!='') {
          medicineupadate({mprice: this.form1.mprice,mname: this.form1.mname,mid:this.x})
          .then((res=>{
            if(res.data.code==200)
            {
              this.$message.success("修改成功")
              this.dialogFormVisible1=false
              this.reload()
            }else{this.$message.error("修改失败")}
          }))
        }else {
          this.$message.error("你有数据未填写")
        }
      },
      handleDelete(index, row) {
        this.$confirm('此操作将永久删除药品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          medicinedelete({mid: this.tableData[index].mid})
            .then((res => {
              if (res.data.code == 200) {
                this.$message.success('删除成功')
                this.reload()
              } else {
                this.$message.error('删除失败')
              }
            }))
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      find()
      {
        if(this.input1!='0') {
          medicineselect({mname: this.input, mid: this.input1}).then((res => {
              this.tableData = res.data.data
              this.dataList = res.data.data;
              //console.log(this.dataList)
              this.total = res.data.data.length;
              this.handleCurrentChange(1);
              let x = 0,y=0
              for (let i = 0; i < this.tableData.length; i++) {
                provider({id: this.tableData[i].pid}).then((res => {
                  this.tableData[x].pname = res.data.data[0].name
                  x++
                }))
              }
              for (let i=0;i<this.dataList.length;i++)
              {
                provider({id:this.dataList[i].pid}).then((res=>{
                  this.dataList[y].pname=res.data.data[0].name

                  y++
                }))
              }
            }
            //console.log(this.tableData)
          ))
        }else {this.$message.error('编号不能为0')}
      },
      shuaxin()
      {
        this.reload()
      },
      addmedicine()
      {
        this.dialogFormVisible=true
      },
      ok()
      {
        provider({id:this.form.pid}).then((res=>{
          if(res.data.code==200)
          {
            if(this.form.pid!=''&&this.form.mprice!=''&&this.form.mname!=''){
            medicineinsert({mname:this.form.mname,mprice: this.form.mprice,pid:this.form.pid})
              .then((res=>{
                this.$message.success("添加成功")
                this.dialogFormVisible=false
                this.reload()
              }))}
            else {
              this.$message.error("你有信息未填")
            }
          }else{
            this.$message.error("该供应商不存在")
          }
        }))

      },
      selectInfo()
      {

        medicineselect({}).then((res=>{
          this.tableData=res.data.data
            this.dataList = res.data.data;
          //console.log(this.dataList)
            this.total = res.data.data.length;
            this.handleCurrentChange(1);
            let x=0,y=0
            for (let i=0;i<this.tableData.length;i++)
            {
                provider({id:this.tableData[i].pid}).then((res=>{
                  this.tableData[x].pname=res.data.data[0].name

                  x++
                }))
            }
            for (let i=0;i<this.dataList.length;i++)
            {
              provider({id:this.dataList[i].pid}).then((res=>{
                this.dataList[y].pname=res.data.data[0].name

                y++
              }))
            }


        }

        ))
      },


      handleSizeChange: function (pageSize) {
        this.pageSize = pageSize;
        this.handleCurrentChange(this.currentPage);
        this.handleCurrentChange(1);
      },
      //页码切换
      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage;
        this.currentChangePage(this.dataList, currentPage);
      },
      //分页方法
      currentChangePage(list, currentPage) {
        let from = (currentPage - 1) * this.pageSize;
        let to = currentPage * this.pageSize;
        this.tableData = [];
        for (; from < to; from++) {
          if (list[from]) {
            this.tableData.push(list[from]);
          }
        }
      }
    },
    created() {
        this.selectInfo()
    }

  }
</script>
<style>

</style>
